      $(function(){
      $( "#tabs" ).tabs({
            collapsible: true
        });

             var grid=  $("#paymentsGrid").jqGrid({
                url: "search",
                datatype: "json",
                mtype: "GET",
                colNames: ["#ID",'Payment Date', 'Payment By',"Amount", "Account", "Status",'Actions'],
                colModel: [
                    { name: "paymentId", width: 55 },
                    { name: "paymentDate", width: 150 },
                    { name: "paymentMethod", width: 80, align: "right" },
                    { name: "paymentAmount", width: 80, align: "right",formatter:'currency' ,formatoptions:currencyformatoptions},
                    { name: "remarks", width: 80, align: "right" },

                    { name: "paymentStatus", width: 100, sortable: false } ,
                    { name : 'action', index:'act', sortable:false,editable:false ,formatter:actionFormat, unformat:actionUnFormat},
                ],
                postData: {
                               id: function() { return $("#search-paymentId").val(); },
                               fromDate: function() { return $("#fromDate").val(); },
                               toDate: function() { return $("#toDate").val(); },
                               paymentStatus: function() { return $("#search-paymentStatus").val(); },
                               paymentMethod: function() { return $("#search-paymentMethod").val();}
                             },
                              viewrecords: true,
                    toolbarfilter: true,
                    footerrow : true,
                    	userDataOnFooter : true,
                    	altRows : true,
                rowNum: 2,
                rowList: [10, 20, 30],
                sortname: "paymentId",
                sortorder: "desc",
                viewrecords: true,
                gridview: true,
                autoencode: true,
                caption: "Customers" ,
                height:400,
                autowidth : true,
                pager: "#paymentsGridPager",
                jsonReader : {root:"payments"},
                gridComplete: function(){
//			        var ids = jQuery("#paymentsGrid").jqGrid('getDataIDs');
//                for(var i=0;i < ids.length;i++){
//                    var cl = ids[i];
//                    be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#paymentsGrid').editRow('"+cl+"');\"><i class='fa fa-pencil'></i></button>";
//                    se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#paymentsGrid').saveRow('"+cl+"');\"><i class='fa fa-save'></i></button>";
//                    ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#paymentsGrid').restoreRow('"+cl+"');\"><i class='fa fa-times'></i></button>";
//                    jQuery("#paymentsGrid").jqGrid('setRowData',ids[i],{act:be+se+ca});
//                }
                }

                });


                jQuery("#paymentsGrid")
                .navGrid('#paymentsGridPager',{edit:false,add:false,del:false,search:false})
                .navButtonAdd('#paymentsGridPager',{
                   caption:"Add",
                   buttonicon:"ui-icon-add",
                   onClickButton: function(){
                     alert("Adding Row");
                   },
                   position:"last"
                })
                .navButtonAdd('#paymentsGridPager',{
                   caption:"Del",
                   buttonicon:"ui-icon-del",
                   onClickButton: function(){
                      alert("Deleting Row");
                   },
                   position:"last"
                });


                  jQuery("#paymentsGrid").jqGrid('navGrid', "#paymentsGridPager", {
                    		edit : false,
                    		add : false,
                    		del : false,

                    	});

                jQuery("a.get_selected_ids").bind("click", function() {
                		s = jQuery("#paymentsGrid").jqGrid('getGridParam', 'selarrrow');

                	});
                	 jQuery(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
                    	jQuery(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
                    	jQuery(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
                    	jQuery(".ui-jqgrid-pager").removeClass("ui-state-default");
                    	jQuery(".ui-jqgrid").removeClass("ui-widget-content");

                    	jQuery(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
                    	jQuery(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
                    	jQuery(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
                    	jQuery(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
                    	jQuery(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
                    	jQuery(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
                    	jQuery(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
                    	jQuery(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
                    	jQuery(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

                    	jQuery( ".ui-icon.ui-icon-seek-prev" ).wrap( '<div class="btn btn-sm btn-default"></div>' );
                    	jQuery(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");

                    	jQuery( ".ui-icon.ui-icon-seek-first" ).wrap( '<div class="btn btn-sm btn-default"></div>');
                    	jQuery(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");

                    	jQuery( ".ui-icon.ui-icon-seek-next" ).wrap( '<div class="btn btn-sm btn-default"></div>' );
                    	jQuery(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");

                    	jQuery( ".ui-icon.ui-icon-seek-end" ).wrap( "" );
                    	jQuery(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");


            $( "#create-product").button().click(function () {


             		var options = {
                            url:       'save' ,
                            type:      'post' ,
                            dataType:  'json' ,
                            clearForm: true  ,
                            resetForm: true  ,
                            timeout:   9000  ,
                            beforeSubmit: validate,
                            success:    function() {
                                $('#paymentForm').modal('hide')
                             }  ,
                              error:    function() {
                                 $('input.currency').formatCurrency();

                               alert('Error');


                             },
                             beforeSend: function() {



                             }
                        };

                    //  performFormatting(false);
						$("#payment-form").ajaxSubmit(options) ;

			});
			 $( "#search-order").button().click(function () {

             	grid.trigger("reloadGrid");
			});

            $("#username").change(function () {
                $.ajax({url: "checkUserName", dataType: "json",data: {
                                                      "query": $("#username").val()
                                                  },success: function(result){
                   if(result.employeeId)
                    $("#userNameAlert" ).removeClass( "hide" );
                    else{
                     $("#userNameAlert" ).addClass("hide")
                    }

                 }});

			});

			$('#paymentsForm').modal({
                    keyboard: false ,
                    backdrop: false,
                    show: false
            })

            function actionFormat( cellvalue, options, rowObject ){
            	//<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#paymentsGrid').editRow('"+cl+"');\"><i class='fa fa-pencil'></i></button>

            	return "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' src='"+cellvalue+"' ><i class='fa fa-pencil'></i></button>";
            }
            function actionUnFormat( cellvalue, options, cell){
            	return $('img', cell).attr('src');
            }

            $( "#search-customer" ).autocomplete({

                                                       source: function( request, response ) {
                                                      $.ajax({
                                                             url: "../customer/search",
                                                              dataType: "json",
                                                              data: {
                                                              query: request.term
                                                             },
                                                             success: function( data ) {

                                                               response($.map(data.customers, function(item) {

                                                                                          return {
                                                                                            label: item.name+', '+item.address.city,
                                                                                            value: item.customerId,
                                                                                            customer:item,
                                                                                          }
                                                                                        }));

                                                             }
                                                      }); },
                                                      minLength: 2,
                                                       select: function( event, ui ) {

                                                          var customerInfo = ui.item.customer;

                                                          $( "#customerId" ).val(customerInfo.customerId);
                                                          $( "#customer-company" ).html(customerInfo.company);
                                                          $( "#customer-name" ).html(customerInfo.name);
                                                          $( "#customer-address" ).html(customerInfo.address.city);
                                                          $( "#customer-mobile" ).html(customerInfo.mobile);
                                                          $( "#customerinfo" ).hide();
                                                           $( "#customerDetail" ).removeClass("hide");
                                                          $(this).val("");
                                                          return true;
                                              }
                                              });

                                            $( "#search-customer" ).autocomplete("option", "appendTo", "#customerinfo" );

                                         $('#paymentDateDiv').datetimepicker();



	                 $( "#customerDetailButton").button().click(function () {

             	         $( "#customerinfo" ).show();
                         $( "#customerDetail" ).addClass("hide");
			        });

                      function enableCustomerSearch(){
                           $( "#customerinfo" ).show();
                           $( "#customerDetail" ).addClass("hide");
                      }



              function performFormatting(enable){

                   if(enable){
                      $('input.currency').formatCurrency();
                   }
                   else{
                       $('input.currency').each(function(i){
                           $(this).val( $(this).asNumber());
                      });
                   }
                    return true;
               }


        $("#fromDateDiv").on("dp.change", function (e) {
            $('#toDateDiv').data("DateTimePicker").minDate(e.date);
        });
        $("#toDateDiv").on("dp.change", function (e) {
            $('#fromDateDiv').data("DateTimePicker").maxDate(e.date);
        });


    });

